<template>
   <div class="rx-input" :class="{
     'clearable':beClearable
   }">
   <!-- icon放在前面，方便控制输入框的边距 -->
     <rx-icon class="prefixicon" :name="prefixicon" 
        v-if="prefixicon"/>
      <rx-icon class="suffixicon" :name="suffixicon" 
        v-if="suffixicon"/>
    <!-- end -->
      <input  type="text" 
      :placeholder="placeholder"       
      :value="value"     
      :maxlength="maxLength"
      :readonly="readonly"
      :disabled="disabled"
      :autocomplete="autocomplete"
      :autofocus="autofocus"
      :tabindex="tabindex"

      @click="$emit('click',$event)"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)" 
      @change="$emit('change', $event)"        
      @input="$emit('input', $event.target.value,$event)"          
      />
      <!-- 清除icon -->
      <rx-icon class="clearicon" name="rx-clear" @click="clear" 
        v-if="beClearable"/>
  </div>
</template>
<script>
export default {
  name: "rx-input",
  props: {
    //Start 维持原生属性
    placeholder: {
      type: String,
      default: "请输入"
    },
    value: {
      type: String
    },
    tabindex: {
      type: String
    },
    maxLength: {
      type: String,
      default: "500"
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autocomplete: {
      type: String,
      default: "off"
    },
    autofocus: {
      type: String
    },
    //End 维持原生属性

    clearable: {
      //  是否显示清除
      type: Boolean,
      default: false
    },
    prefixicon: {
      // 添加前面的icon
      type: String
    },
    suffixicon: {
      //添加后面的icon
      type: String
    }
  },
  computed: {
    beClearable() {
      return this.clearable && this.value && !this.disabled && !this.readonly;
    }
  },
  methods: {
    clear() {
      this.$emit("input", "");
      this.$el.querySelector("input").focus();
    }
  }
};
</script>
<style lang="scss">
.rx-input {
  position: relative;
  display: inline-block;
  font-size: 14px;
  width: 100%;

  input {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #d9e1f1;
    box-sizing: border-box;
    color: #333;
    outline: none;
    padding: 8px 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    &:focus {
      border-color: #6772e4;
      outline: #d0d4ff;
    }
    &[disabled] {
      cursor: not-allowed;
      background-color: #f5f7fa;
    }
  }

  .prefixicon,
  .suffixicon,
  .clearicon {
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
    color: gray;
  }
  // 前面的icon
  .prefixicon {
    left: 10px;

    & ~ input {
      padding-left: 30px;
    }
  }
  //后面的icon
  .suffixicon {
    right: 10px;

    & ~ input {
      padding-right: 30px;
    }
  }
  //清空的icon
  .clearicon {
    right: 10px;
    display: none;
    //覆盖在suffixicon上面
    z-index: 1;
    background: #fff;
  }
  &.clearable {
    &:hover {
      .clearicon {
        display: inline;
      }
      input {
        padding-right: 30px;
      }
    }
    input:focus {
      padding-right: 30px;

      & ~ .clearicon {
        display: inline;
      }
    }
  }
}
</style>
